
<!DOCTYPE html>
<html lang="zh-cn">

<head><meta name="generator" content="Hexo 3.8.0">
    <title>
        模板结构 - Admui 开发文档</title>
    <meta charset="utf-8">
    <meta name="keywords" content="admui,admui官网,admui框架,通用后台管理系统,后台框架,ui框架">
    <meta name="description" content="Admui 是一个基于最新 Web 技术的企业级通用管理系统快速开发框架，可以帮助企业极大的提高工作效率，节省开发成本，提升品牌形象">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'" />
    <![endif]-->
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <meta name="msapplication-TileImage" content="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <meta name="msapplication-TileColor" content="#395b81">
    <link rel="apple-touch-icon-precomposed" href="http://cdn.admui.com/site/img/app/icon-72@x2.png">
    <link rel="shortcut icon" href="http://cdn.admui.com/site/img/app/favicon.png">
    <meta name="msapplication-TileColor" content="#62a8ea">
    <script>
        window.PAGE_TYPE = "ui"
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?cd758c4c82a4964836712308cb782b12";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    <link rel="stylesheet" href="http://cdn.admui.com/docs/v1/css/page.css">
</head>

<body>
    <div id="mobile-bar">
        <a class="menu-button"></a>
        <a class="logo" href="../../index.html">Admui开发文档</a>
        <select class="version-select">
            <option value="basic">基础版</option>
            <option value="pjax" selected>pjax版</option>
            <option value="iframe">iframe版</option>
        </select>
    </div>
    <div id="header">
    <a id="logo" href="../../index.html">
        <img src="http://cdn.admui.com/docs/common/images/logo.svg"> <span>Admui 开发文档</span>
    </a>
    <select class="version-select">
        <option value="basic/1.x">基础版</option>
        <option value="pjax/1.x" selected>pjax版</option>
        <option value="iframe/1.x">iframe版</option>
    </select>
    <ul id="nav">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../../index.html" class="nav-link">v2版本</a>
</li>

    </ul>
</div>
    
    <div id="main" class="fix-sidebar">
        
        
<div class="sidebar">
    <ul class="main-menu">
        <li>
    <a href="../index.html" class="nav-link">首页</a>
</li>
<li>
    <a href="../guide/index.html" class="nav-link">介绍</a>
</li>
<li>
    <a href="index.html" class="nav-link current">UI</a>
</li>
<li>
    <a href="../java/index.html" class="nav-link">JAVA</a>
</li>
<li>
    <a href="../logs/index.html" class="nav-link">更新日志</a>
</li>
<li>
    <a href="../../index.html" class="nav-link">v2版本</a>
</li>

    </ul>
    <div class="list">
        <ul class="menu-root">
            
            <li>
                <a href="index.html" class="sidebar-link ">基本概述</a>
            </li>
            
            <li>
                <a href="themes.html" class="sidebar-link ">主题说明</a>
            </li>
            
            <li>
                <a href="build.html" class="sidebar-link ">构建工具</a>
            </li>
            
            <li>
                <a href="files.html" class="sidebar-link ">入口文件</a>
            </li>
            
            <li>
                <a href="structure.html" class="sidebar-link current ">模板结构</a>
            </li>
            
            <li>
                <a href="hello-world.html" class="sidebar-link ">Hello world</a>
            </li>
            
            <li>
                <a href="style.html" class="sidebar-link ">自定义样式</a>
            </li>
            
            <li>
                <a href="javascript.html" class="sidebar-link ">JS 模块</a>
            </li>
            
            <li>
                <a href="components.html" class="sidebar-link ">UI 组件</a>
            </li>
            
            <li>
                <a href="plugins.html" class="sidebar-link ">第三方插件</a>
            </li>
            
            <li>
                <a href="icons.html" class="sidebar-link ">字体图标</a>
            </li>
            
            <li>
                <a href="code-guide.html" class="sidebar-link ">编码规范</a>
            </li>
            
        </ul>
    </div>
</div>


<div class="content ui with-sidebar">
    <h1>模板结构</h1>
    <p>一般情况下，模板的结构如下(具体代码见<code>/views/index.html</code>或<code>/src/pages/index.html</code>)。</p>
<h2 id="代码片段"><a href="#%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5" class="headerlink" title="代码片段"></a>代码片段</h2><h3 id="头部-site-navbar"><a href="#%E5%A4%B4%E9%83%A8-site-navbar" class="headerlink" title="头部(.site-navbar)"></a>头部(.site-navbar)</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"site-navbar navbar navbar-default navbar-fixed-top navbar-inverse"</span> <span class="attr">role</span>=<span class="string">"navigation"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"navbar-header"</span>&gt;</span></span><br><span class="line">        ......</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"navbar-container container-fluid"</span>&gt;</span></span><br><span class="line">        ......</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="标签页-site-contabs"><a href="#%E6%A0%87%E7%AD%BE%E9%A1%B5-site-contabs" class="headerlink" title="标签页(.site-contabs)"></a>标签页(.site-contabs)</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"site-contabs"</span> <span class="attr">id</span>=<span class="string">"admui-siteConTabs"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-icon btn-default pull-left hide"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"icon fa-angle-double-left"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"contabs-scroll pull-left"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"nav con-tabs"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"active"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">data-pjax</span> <span class="attr">href</span>=<span class="string">"/"</span> <span class="attr">rel</span>=<span class="string">"contents"</span>&gt;</span><span class="tag">&lt;<span class="name">span</span>&gt;</span>首页<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"btn-group pull-right"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-icon btn-default hide"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"icon fa-angle-double-right"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span> <span class="attr">class</span>=<span class="string">"btn btn-default dropdown-toggle btn-outline"</span> <span class="attr">data-toggle</span>=<span class="string">"dropdown"</span> <span class="attr">aria-expanded</span>=<span class="string">"false"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"caret"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"sr-only"</span>&gt;</span>切换菜单<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"dropdown-menu dropdown-menu-right"</span> <span class="attr">aria-labelledby</span>=<span class="string">"conTabsDropdown"</span> <span class="attr">role</span>=<span class="string">"menu"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"reload-page"</span> <span class="attr">role</span>=<span class="string">"presentation"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">role</span>=<span class="string">"menuitem"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"icon wb-reload"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 刷新当前<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"close-other"</span> <span class="attr">role</span>=<span class="string">"presentation"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">role</span>=<span class="string">"menuitem"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"icon wb-close"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 关闭其他<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"close-all"</span> <span class="attr">role</span>=<span class="string">"presentation"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span> <span class="attr">role</span>=<span class="string">"menuitem"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"icon wb-power"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 关闭所有<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>标签页是可选的，您也可以不使用标签页。</p>
<h3 id="内容-site-page"><a href="#%E5%86%85%E5%AE%B9-site-page" class="headerlink" title="内容(.site-page)"></a>内容(.site-page)</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">main</span> <span class="attr">class</span>=<span class="string">"site-page"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page-container"</span> <span class="attr">id</span>=<span class="string">"admui-pageContent"</span>&gt;</span></span><br><span class="line">        ......</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page-loading vertical-align text-center"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"page-loader loader-default loader vertical-align-middle"</span> <span class="attr">data-type</span>=<span class="string">"default"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br></pre></td></tr></table></figure>
<ol>
<li>如果要通过页面中的<code>&lt;a&gt;</code>链接在内容区域打开一个页面，请在该<code>&lt;a&gt;</code>元素上添加<code>data-pjax=&quot;&quot;</code>；</li>
<li>如果要在页面某个元素(如<code>&lt;div id=&quot;demo-content&quot;&gt;&lt;/div&gt;</code>)中渲染一个页面，可使用<code>data-pjax=&quot;#demo-content&quot;</code>；</li>
<li>如果要打开一个新选项，请添加<code>target=&quot;_blank&quot;</code>，更多问题请参考<a href="https://github.com/defunkt/jquery-pjax" target="_blank" rel="noopener">jQuery Pjax</a>。</li>
</ol>
<h3 id="菜单-site-menubar"><a href="#%E8%8F%9C%E5%8D%95-site-menubar" class="headerlink" title="菜单(.site-menubar)"></a>菜单(.site-menubar)</h3><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">nav</span> <span class="attr">class</span>=<span class="string">"site-menubar"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"site-menubar-body"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab-content height-full"</span> <span class="attr">id</span>=<span class="string">"admui-navTabs"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"tab-pane animation-fade height-full active"</span> <span class="attr">id</span>=<span class="string">"admui-navTabsItem-1"</span> <span class="attr">role</span>=<span class="string">"tabpanel"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"site-menu"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"site-menu-category"</span>&gt;</span>二级菜单<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"site-menu-item has-sub"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"site-menu-icon fa-bars"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"site-menu-title"</span>&gt;</span>三级菜单<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"site-menu-arrow"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"site-menu-sub"</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"site-menu-item"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">data-pjax</span> <span class="attr">class</span>=<span class="string">"animsition-link"</span> <span class="attr">href</span>=<span class="string">"/examples/menu.html"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"site-menu-title"</span>&gt;</span>四级菜单<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"site-menu-item has-sub"</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"site-menu-title"</span>&gt;</span>四级菜单<span class="tag">&lt;/<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"site-menu-arrow"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                                    <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"site-menu-sub"</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"site-menu-item"</span>&gt;</span></span><br><span class="line">                                            <span class="tag">&lt;<span class="name">a</span> <span class="attr">data-pjax</span> <span class="attr">class</span>=<span class="string">"animsition-link"</span> <span class="attr">href</span>=<span class="string">"/examples/menu.html"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span></span><br><span class="line">                                                <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"site-menu-title"</span>&gt;</span>五级菜单<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                                            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                        ......</span><br><span class="line">                                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                                ......</span><br><span class="line">                            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                        ......</span><br><span class="line">                    <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            ......</span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        ......</span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">nav</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>如果算上导航条，Admui 共支持5级菜单。</p>
<h2 id="布局相关"><a href="#%E5%B8%83%E5%B1%80%E7%9B%B8%E5%85%B3" class="headerlink" title="布局相关"></a>布局相关</h2><p>Admui包含了几种可选布局：</p>
<h3 id="默认布局"><a href="#%E9%BB%98%E8%AE%A4%E5%B8%83%E5%B1%80" class="headerlink" title="默认布局"></a>默认布局</h3><p>默认布局提供快速响应的菜单栏，在页面 js 未加载完成时，您可以在<code>&lt;html&gt;</code>标签上添加<code>class=&quot;css-menubar&quot;</code>来调用菜单样式。</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">class</span>=<span class="string">"no-js css-menubar"</span> <span class="attr">lang</span>=<span class="string">"zh-cn"</span>&gt;</span></span><br><span class="line">    ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="菜单折叠"><a href="#%E8%8F%9C%E5%8D%95%E6%8A%98%E5%8F%A0" class="headerlink" title="菜单折叠"></a>菜单折叠</h3><p>如果您需要菜单默认是折叠的，您需要移除<code>&lt;html&gt;</code>标签上的<code>class=&quot;css-menubar&quot;</code>，同时在<code>&lt;body&gt;</code>标签上添加<code>class=&quot;site-menubar-fold site-menubar-keep&quot;</code>。示例代码如下：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">class</span>=<span class="string">"site-menubar-fold site-menubar-keep"</span> <span class="attr">data-auto-menubar</span>=<span class="string">"false"</span>&gt;</span></span><br><span class="line">    ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="菜单展开"><a href="#%E8%8F%9C%E5%8D%95%E5%B1%95%E5%BC%80" class="headerlink" title="菜单展开"></a>菜单展开</h3><p>如果您需要菜单默认是展开的，您需要移除<code>&lt;html&gt;</code>标签上的<code>class=&quot;css-menubar&quot;</code>，同时在<code>&lt;body&gt;</code>标签上添加<code>class=&quot;site-menubar-unfold site-menubar-keep&quot;</code>。示例代码如下：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">class</span>=<span class="string">"site-menubar-unfold site-menubar-keep"</span>&gt;</span></span><br><span class="line">    ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="使用标签页"><a href="#%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E9%A1%B5" class="headerlink" title="使用标签页"></a>使用标签页</h3><p>如果需要使用标签页，请在<code>&lt;body&gt;</code>标签上添加<code>class=&quot;site-contabs-open&quot;</code>。示例代码如下：</p>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span> <span class="attr">class</span>=<span class="string">"site-contabs-open"</span>&gt;</span></span><br><span class="line">    ......</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

    
    <div class="page-links">
        
        <span><a href="files.html">&lang; 上一页：入口文件</a></span>
        
        
        <span style="float:right"><a href="hello-world.html">下一页：Hello world &rang;</a></span>
        
    </div>
    
    <div class="footer">
    &copy; 2015-2017
    <a href="http://www.admui.com/">Admui</a>
    ·
    上海畅控
</div>
</div>

        
    </div>
    

    <script src="https://cdn.staticfile.org/smooth-scroll/14.2.1/smooth-scroll.min.js"></script>
    <script src="http://cdn.admui.com/docs/common/js/common.js"></script>

    <script src="https://cdn.staticfile.org/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);
        (function () {
            var bp = document.createElement('script');
            var curProtocol = window.location.protocol.split(':')[0];
            if (curProtocol === 'https') {
                bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
            }
            else {
                bp.src = 'http://push.zhanzhang.baidu.com/push.js';
            }
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(bp, s);
        })();
    </script>

</body>

</html>